<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米详情页</title>
    <link rel="icon" href="images/favicon.ico">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="./css/detail.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="./lib/swiper.min.css">
    <script src="./lib/jquery-1.12.4.min.js"></script>
    <script src="./js/jquerycookie.js"></script>
    <script src="./js/plugin.js"></script>
    <script src="./js/utils.js"></script>
    <script src="./js/index.js"></script>
    <script src="./js/detail.js"></script>
</head>

<body>
    <!-- 顶部 -->
    <header>
        <div class="header-con">
            <ul>
                <li><a href="">小米商城</a><span>|</span></li>
                <li><a href="">MIUI </a><span>|</span></li>
                <li><a href="">loT </a><span>|</span></li>
                <li><a href="">云服务 </a><span>|</span></li>
                <li><a href="">天星数科 </a><span>|</span></li>
                <li><a href="">有品 </a><span>|</span></li>
                <li><a href="">小爱开放平台</a><span>|</span></li>
                <li><a href="">企业团购</a><span>|</span></li>
                <li><a href="">资质证照</a><span>|</span></li>
                <li><a href="">协议规则</a><span>|</span></li>
                <li><a href="">下载app<em></em>
                        <span><img src="./images/code.png"><i>小米商城</i></span></a><span>|</span></li>
                <li><a href="">智能生活</a><span>|</span></li>
                <li><a href="">Select Location</a><span>|</span></li>
            </ul>
            <div class="header-right">
                <a href="./login.html">登录</a><i>|</i>
                <a href="./login.html">注册</a><i>|</i>
                <a>消息通知</a>
                <div class="bigCart">
                    <i class="iconfont icon-gouwuchekong">
                    </i> <b>购物车 (0)</b>
                    <div class="cartBox">
                        <div class="loading"></div>
                        <ol>
                        </ol>
                        <div class="cartTotal hide clear-fix">
                            <span class="total">共 <em>0</em> 件商品<span class="price"><em></em>元</span></span>
                            <a class="btn btn-primary btn-cart">结算</a>
                        </div>
                        <span class="cartM clear-fix">购物车中还没有商品，赶紧选购吧！</span>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <div id="site-header">
        <div class="site-header-con">
            <!-- logo -->
            <div class="header-logo">
                <a href="https://www.mi.com/index.html" title="小米官网" class="logo ir">小米官网</a>
            </div>
            <!-- logo旁边的nav -->
            <div class="header-nav">
                <ul class="site-ul">
                    <li class="nav-category"><a href=""><span class="text">全部商品分类</span></a>
                        <div class="site-category" style="display: none;">
                            <ul class="site-categoryList">
                                <li class="categoryItem"><a href="" class="title">手机电话卡 <span class="iconfont icon-youjiantou
"></span></a></li>
                                <li class="categoryItem"><a href="" class="title">电视盒子<span class="iconfont icon-youjiantou
                                "></span></a></li>
                                <li class="categoryItem"><a href="" class="title">笔记本示器<span class="iconfont icon-youjiantou
                                "></span></a></li>
                                <li class="categoryItem"><a href="" class="title">家电插线板<span class="iconfont icon-youjiantou
                                "></span></a></li>
                                <li class="categoryItem"><a href="" class="title">出行穿戴<span class="iconfont icon-youjiantou
                                "></span></a></li>
                                <li class="categoryItem"><a href="" class="title">智能路由器<span class="iconfont icon-youjiantou
                                "></span></a></li>
                                <li class="categoryItem"><a href="" class="title">电源配件<span class="iconfont icon-youjiantou
                                "></span></a></li>
                                <li class="categoryItem"><a href="" class="title">健康儿童<span class="iconfont icon-youjiantou
                                "></span></a></li>
                                <li class="categoryItem"><a href="" class="title">耳机音箱<span class="iconfont icon-youjiantou
                                "></span></a></li>
                                <li class="categoryItem"><a href="" class="title">生活箱包<span class="iconfont icon-youjiantou
                                "></span></a></li>
                            </ul>
                        </div>
                    </li>
                    <li class='nav-item'><a href=""><span class="text">小米手机</span></a> </li>
                    <li class='nav-item'><a href=""><span class="text">Redmi红米</span></a> </li>
                    <li class='nav-item'><a href=""><span class="text">电视</span></a> </li>
                    <li class='nav-item'><a href=""><span class="text">笔记本</span></a> </li>
                    <li class='nav-item'><a href=""><span class="text">家电</span></a> </li>
                    <li class='nav-item'><a href=""><span class="text">路由器</span></a> </li>
                    <li class='nav-item'><a href=""><span class="text">智能硬件</span></a> </li>
                    <li class='nav-item'><a href=""><span class="text">服务</span></a> </li>
                    <li class='nav-item'><a href=""><span class="text">社区</span></a> </li>
                </ul>
            </div>
            <!-- logo最右边的搜索框 -->
            <div class="header-search">
                <form action="">
                    <input type="text" placeholder="小米">
                    <input type="submit" value=""><span class="iconfont icon-fangdajing
"></span>
                </form>
            </div>
        </div>
    </div>
    <div id="header-nav-menu">
        <div class="header-nav-menu-con">
            <ul class="nav-menu-ul">
                <li><a href=""></a>
                    <div class="phone-box"><img src="./images/mi fold.webp" style='width:296px;height:180px' alt="">
                    </div>
                    <div class="title">小米MIX FOLD</div>
                    <p class="price">9999元</p>
                </li>
                <li><a href=""></a>
                    <div class="phone-box"><img src="./images/mi fold.webp" alt=""></div>
                    <div class="title">小米MIX FOLD</div>
                    <p class="price">9999元</p>
                </li>
                </li>
                <li><a href=""></a>
                    <div class="phone-box"><img src="./images/mi fold.webp" alt=""></div>
                    <div class="title">小米MIX FOLD</div>
                    <p class="price">9999元</p>
                </li>
                </li>
                <li><a href=""></a>
                    <div class="phone-box"><img src="./images/mi fold.webp" alt=""></div>
                    <div class="title">小米MIX FOLD</div>
                    <p class="price">9999元</p>
                </li>
                </li>
                <li><a href=""></a>
                    <div class="phone-box"><img src="./images/mi fold.webp" alt=""></div>
                    <div class="title">小米MIX FOLD</div>
                    <p class="price">9999元</p>
                </li>
                </li>
                <li><a href=""></a>
                    <div style="border: none;" class="phone-box"><img src="./images/mi fold.webp" alt=""></div>
                    <div class="title">小米MIX FOLD</div>
                    <p class="price">9999元</p>
                </li>
                </li>
            </ul>
        </div>
    </div>
    <!-- 小导航 -->
    <nav>
        <div class="nav-con">
            <h2>小米11 青春版</h2>
            <div class="con">
                <div class="left"><span class="separator">|</span> <a href="https://www.mi.com/mi10youth">小米10青春</a>
                </div>
                <div class="right"><a>概述页</a> <span class="separator">|</span> <a>参数页</a> <span
                        class="separator">|</span> <a href="">F码通道</a> <span class="separator">|</span> <a
                        href="javascript:void(0);" class="J_contactBtn">咨询客服</a> <span class="separator">|</span> <a
                        class="J_nav_comment">用户评价</a></div>
            </div>
        </div>
    </nav>
    <nav id="navD" style="position: fixed;top:0;">
        <div class="nav-con">
            <h2>小米11 青春版</h2>
            <div class="con">
                <div class="left"><span class="separator">|</span> <a href="https://www.mi.com/mi10youth">小米10青春</a>
                </div>
                <div class="right"><a>概述页</a> <span class="separator">|</span> <a>参数页</a> <span
                        class="separator">|</span>
                    <a href="">F码通道</a> <span class="separator">|</span> <a href="javascript:void(0);"
                        class="J_contactBtn">咨询客服</a> <span class="separator">|</span> <a class="J_nav_comment">用户评价</a>
                </div>
            </div>
        </div>
    </nav>
    <!-- 具体详情 -->
    <div id="miDetail">
        <div class="miDetail-con">
            <div class="imgLeft">
                <div class="imgBox">
                    <img src="./images/detail/9A.jpg" alt="">
                </div>
            </div>
            <div class="product-con">
                <h2>小米11 青春版</h2>
                <p data-v-70283663="" class="sale-desc">
                    <font color="#ff4a00">「享6期免息，买赠价值897元三人体检套餐，赠新冠保险权益，浦发信用卡分期最高减100元；仅套装版含充电器」</font>轻薄、多彩 / 骁龙780G /
                    专业电影相机，前置超级夜景 /
                    AMOLED 柔性直屏 / 超线性立体声双扬声器
                </p>
                <p class="company-info">小米自营</p>
                <div class="priceInfo">
                    <span>2599 元</span>
                </div>
                <div class="line"></div>
                <div class="address">
                    <div class="product-address">
                        <i class="iconfont icon-tubiao"></i>
                        <div class="address-con">
                            <div class="addressInfo">
                                <span>北京</span><span>北京市</span><span>海定区</span><span>青海街道</span>
                            </div>
                            <a href="" class="edit">修改</a>
                        </div>
                        <div class="info">
                            <span>有现货</span>
                        </div>
                    </div>
                </div>
                <div class="buyOption">
                    <div class="buy-box-child">
                        <div class="option-box">
                            <div class="title">选择版本</div>
                            <ul class="clear-fix">
                                <li class=""><a>8GB+128GB</a></li>
                                <li class="active"><a>8GB+256GB</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="buy-box-child">
                        <div class="option-box">
                            <div class="title">选择颜色</div>
                            <ul class="clear-fix">
                                <li class=""><a>清甜荔枝</a></li>
                                <li class=""><a>冰峰黑提</a></li>
                                <li class=""><a>清凉薄荷</a></li>
                                <li class="active"><a>樱花蜜粉</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="buy-box-child">
                        <div class="option-box">
                            <div class="title">选择套装</div>
                            <ul class="clear-fix">
                                <li class=""><a>标准版</a></li>
                                <li class="active"><a>套装版(赠充电器)</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="selected-list">
                    <ul class="clear-fix">
                        <li>小米11 青春版 8GB+128GB 清甜荔枝<span>2299元</span></li>
                    </ul>
                    <div class="total">总计：2299元</div>
                </div>
                <div class="btnBox">
                    <div class="sale-btn"><a href="javascript:void(0);" class="btn btn-primary">加入购物车</a>
                        <!---->
                    </div>
                    <div class="favorite-btn"><a class="btn-gray btn-like"><i class="iconfont icon-xihuan"></i>喜欢</a>
                    </div>
                </div>
                <div class="afterInfo">
                    <span><a href="javascript:void(0);" class="support"><i
                                class="iconfont icon-2"></i><em>小米自营</em></a></span>
                    <span><a href="javascript:void(0);" class="support"><i
                                class="iconfont icon-2"></i><em>小米发货</em></a></span>
                    <span><a href="javascript:void(0);" class="support"><i
                                class="iconfont icon-2"></i><em>7天无理由退货</em></a></span>
                    <span><a href="javascript:void(0);" class="support"><i
                                class="iconfont icon-2"></i><em>运费说明</em></a></span>
                    <span><a href="javascript:void(0);" class="support"><i
                                class="iconfont icon-2"></i><em>企业信息</em></a></span>
                    <span><a href="javascript:void(0);" class="support"><i
                                class="iconfont icon-2"></i><em>7天价格保护</em></a></span>
                </div>
            </div>
        </div>
        <div class="product-detail">
            <div class="product-con">
                <h3>价格说明</h3>
            </div>
            <div class="imgBox">
                <img src="./images/detail/de.jpeg" alt="">
            </div>
        </div>
    </div>
    <!-- 底部模块 -->
    <div id="bottom">
        <div class="bottom-con">
            <div class="bService">
                <ul>
                    <li><a href=""><em class="iconfont icon-editor2"></em>预约维修服务</a></li>
                    <li><a href=""><em class="iconfont icon-7"></em>7天无理由退货</a></li>
                    <li><a href=""><em class="iconfont icon-15"></em>15天免费换货</a></li>
                    <li><a href=""><em class="iconfont icon-liwu"></em>满69包邮</a></li>
                    <li><a href=""><em class="iconfont icon-tubiao"></em>520余家售后网点</a></li>
                </ul>
            </div>
            <div class="bLinks clear-fix">
                <dl class="colLinks">
                    <dt>帮助中心</dt>
                    <dd><a href="">小米之家</a></dd>
                    <dd><a href="">服务网点</a></dd>
                    <dd><a href="">授权体验店</a></dd>
                </dl>
                <dl class="colLinks">
                    <dt>服务支持</dt>
                    <dd><a href="">售后政策</a></dd>
                    <dd><a href="">自助服务</a></dd>
                    <dd><a href="">相关下载</a></dd>
                </dl>
                <dl class="colLinks">
                    <dt>线下门店</dt>
                    <dd><a href="">小米之家</a></dd>
                    <dd><a href="">服务网点</a></dd>
                    <dd><a href="">授权体验店</a></dd>
                </dl>
                <dl class="colLinks">
                    <dt>关于小米</dt>
                    <dd><a href="">了解小米</a></dd>
                    <dd><a href="">加入小米</a></dd>
                    <dd><a href="">投资者关系</a></dd>
                    <dd><a href="">企业社会责任</a></dd>
                    <dd><a href="">廉洁举报</a></dd>
                </dl>
                <dl class="colLinks">
                    <dt>关注我们</dt>
                    <dd><a href="">新浪微博</a></dd>
                    <dd><a href="">官方微信</a></dd>
                    <dd><a href="">联系我们</a></dd>
                    <dd><a href="">公益基金会</a></dd>
                </dl>
                <dl class="colLinks">
                    <dt>特色服务</dt>
                    <dd><a href="">F 码通道</a></dd>
                    <dd><a href="">礼物码</a></dd>
                    <dd><a href="">防伪查询</a></dd>
                </dl>
                <div class="colContact">
                    <p>400-100-5678</p>
                    <p>8:00-18:00（仅收市话费）</p>
                    <a href=""><em style="font-size: 12px;" class="iconfont icon-xinxi
"></em>人工客服</a>
                    <div class="follow">
                        关注小米:
                        <a href=""></a>
                        <a href=""></a>
                        <img src="./images/lastScode.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="siteInfo">
            <div class="info-con">
                <div class="last-log ir">
                    小米官网
                </div>
                <div class="infoText">
                    <p class="sites"><a href="//www.mi.com/index.html">小米商城</a> <span class="sep">|</span> <a
                            href="//www.miui.com/">MIUI</a> <span class="sep">|</span> <a
                            href="//home.mi.com/index.html">米家</a> <span class="sep">|</span> <a
                            href="http://www.miliao.com/">米聊</a> <span class="sep">|</span> <a
                            href="//www.duokan.com/">多看</a> <span class="sep">|</span> <a
                            href="//game.xiaomi.com/">游戏</a> <span class="sep">|</span> <a
                            href="//b.mi.com/?client_id=180100031058&amp;masid=17409.0358">政企服务</a> <span
                            class="sep">|</span> <a href="//xiaomi.tmall.com/">小米天猫店</a> <span class="sep">|</span> <a
                            href="//privacy.mi.com/all/zh_CN/">小米集团隐私政策</a> <span class="sep">|</span> <a
                            href="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/f516fe9e2c01.html">小米公司儿童信息保护规则</a> <span
                            class="sep">|</span> <a
                            href="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/ded8d0e4a77d.html">小米商城隐私政策</a> <span
                            class="sep">|</span> <a href="//www.mi.com/about/user-agreement/">小米商城用户协议</a> <span
                            class="sep">|</span> <a href="//static.mi.com/feedback/">问题反馈</a> <span class="sep">|</span>
                        <a href="javascript:void(0);" class="J_siteGlobalRegion">Select Location</a>
                    </p>
                    <p class="sites"><a href="http://www.mi.com/beihu">北京互联网法院法律服务工作站</a> <span class="sep">|</span> <a
                            href="http://www.cca.org.cn/">中国消费者协会</a> <span class="sep">|</span> <a
                            href="http://www.bj315.org/">北京市消费者协会</a></p>
                    <p>
                        ©
                        <a href="javascript:;" title="mi.com">mi.com</a> 京ICP证110507号
                        <a href="http://beian.miit.gov.cn/">京ICP备10046444号</a> <a
                            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802020134">京公网安备11010802020134号</a>
                        <a href="//www.mi.com/culture-license/">京网文[2020]0276-042号</a> <br> <a
                            href="//www.mi.com/medical/record/">（京）网械平台备字（2018）第00005号</a> <a
                            href="//www.mi.com/medical/qualification/">互联网药品信息服务资格证 (京)-非经营性-2014-0090</a> <a
                            href="//www.mi.com/business-license/">营业执照</a> <a
                            href="//www.mi.com/medical/list/">医疗器械质量公告</a> <br> <a
                            href="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e0c7d4cf3b7cd88de10196e30c92e020.png">增值电信业务许可证</a>&nbsp;网络食品经营备案
                        京食药网食备202010048 &nbsp;
                        <a
                            href="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c6859168166651511897f54fa1047fe3.png">食品经营许可证</a>
                        <br>
                        违法和不良信息举报电话：171-5104-4404&nbsp;<a
                            href="https://www.mi.com/intellectual">知识产权侵权投诉</a>&nbsp;本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
                    </p>
                </div>
                <div class="infoLinks">
                    <a href=""><img src="./images/truste.png" alt=""></a><a href=""><img src="./images/v-logo-2.png"
                            alt=""></a><a href=""><img src="./images/icon3.png" alt=""></a><a href=""><img
                            src="./images/icon4.png" alt=""></a><a href=""><img src="./images/wsafe.png" alt=""><img
                            style="opacity: 0;" src="./images/276.png" alt=""></a>
                </div>
                <div class="slogan ir">
                    探索黑科技，小米为发烧而生
                </div>
            </div>
        </div>
    </div>
    <!-- 侧边栏 -->
    <div id="side-tab">
        <a class="sideItem">
            <div>
                <img src="./images/side/1.png" alt="">
                <img src="./images/side/2.png" alt="">
            </div>
            <span class="text">手机APP</span>
            <div class="popContent">
                <img src="./images/code.png" alt="">
                <span class="popDesc">扫码领取新人百元礼包</span>
            </div>
        </a>
        <a class="sideItem">
            <div>
                <img src="./images/side/3.png" alt="">
                <img src="./images/side/4.png" alt="">
            </div>
            <span class="text">个人中心</span>
        </a>
        <a class="sideItem">
            <div>
                <img src="./images/side/5.png" alt="">
                <img src="./images/side/6.png" alt="">
            </div>
            <span class="text">售后服务</span>
        </a>
        <a class="sideItem">
            <div>
                <img src="./images/side/7.png" alt="">
                <img src="./images/side/8.png" alt="">
            </div>
            <span class="text">人工客服</span>
        </a>
        <a class="sideItem">
            <div>
                <img src="./images/side/9.png" alt="">
                <img src="./images/side/10.png" alt="">
            </div>
            <span class="text">购物车</span>
        </a>
        <a class="sideItem backTop">
            <div>
                <img src="./images/side/totop.png" alt="">
                <img src="./images/side/totop_hover.png" alt="">
            </div>
            <span class="text">回顶部</span>
        </a>
    </div>
</body>
<script src="./lib/swiper.min.js"></script>

</html>